<template>
    <el-card shadow="never">
        <el-tabs
                v-model="activeName"
                @tab-change="changeType"
                type="card">
                <el-tab-pane label="公司类型" name="company"></el-tab-pane>
                <el-tab-pane label="住户类型" name="family"></el-tab-pane>
        </el-tabs>
        <yun-table
                v-if="columns"
                :columns="columns"
                search="name"
                toolbar="refresh,add,edit,del,download,recyclebin,more"
                :auth="{
                    add:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','add')},
                    edit:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','edit')},
                    del:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','del')},
                    multi:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','multi')},
                    download:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','download')},
                    recyclebin:{:$auth->check('app\\admin\\controller\\delivery\\channel\\Customer','recyclebin')},
                }"
                :extend="extend">
        </yun-table>
    </el-card>
</template>
<script>
    import table from "@components/Table.js";
    export default{
        components:{
            'YunTable':table,
        },
        data:{
            activeName:'company',
            extend:{
                index_url: 'delivery/channel-customer/index',
                add_url: 'delivery/channel-customer/add',
                edit_url: 'delivery/channel-customer/edit',
                del_url: 'delivery/channel-customer/del',
                multi_url: 'delivery/channel-customer/multi',
                download_url: 'delivery/channel-customer/download',
                recyclebin_url:'delivery/channel-customer/recyclebin'
            },
            columns:'',
            companyColumns:[
                {checkbox: true},
                {field: 'name', title: '公司名称',operate:{form:'input',type:'text',placeholder:'请输入公司名称',filter: 'like'}},
                {field: 'gird_id', title:'所属网格',operate:'select',searchList: Yunqi.data.gird},
                {field: 'license', title: '执照编号',operate:'like',width: 200},
                {field: 'cover_url', title: '门头',operate:false,formatter:Yunqi.formatter.image},
                {
                    field:"user_id",
                    title:"绑定用户",
                    operate:false,
                    formatter:function (data,row){
                        let tags=Yunqi.formatter.tags;
                        tags.value=row.user?row.user.map(function (item){return item.nickname}):[];
                        return tags;
                    }
                },
                {field: 'contact', title: '联系人',width:90,operate:false},
                {field: 'mobile', title: '手机',width:120,operate:false},
                {
                    field:"area_id",
                    title:"所属区域",
                    width: 200,
                    operate:{form:"cascader",filter:"=",url:"ajax/area",level:3,name:"area.id"},
                    formatter:function (data,row){
                        let text=Yunqi.formatter.text;
                        text.value=row.area?row.area.mergename:''
                        return text;
                    }
                },
                {field: 'address', title: '详细地址',operate:false,visible:false},
                {field: 'status', title: '状态',width:100,operate:'select', searchList: {'normal': __('正常'),'hidden': __('隐藏')},formatter:Yunqi.formatter.switch},
                {
                    fixed: 'right',
                    field: 'operate',
                    title: '操作',
                    width:120,
                    action:{edit:true,del:true}
                }
            ],
            familyColumns:[
                {checkbox: true},
                {field: 'gird_id', title:'所属网格',operate:'select',searchList: Yunqi.data.gird},
                {
                    field:"area_id",
                    title:"所属区域",
                    operate:{form:"cascader",filter:"=",url:"ajax/area",level:3,name:"area.id"},
                    formatter:function (data,row){
                        let text=Yunqi.formatter.text;
                        text.value=row.area?row.area.mergename:''
                        return text;
                    }
                },
                {field: 'address', title: '街道/小区/楼号',operate:false},
                {field: 'contact', title: '联系人',width:80,operate:false},
                {field: 'mobile', title: '手机',width:120,operate:false},
                {
                    field:"user_id",
                    title:"绑定用户",
                    operate:false,
                    formatter:function (data,row){
                        let tags=Yunqi.formatter.tags;
                        tags.value=row.user?row.user.map(function (item){return item.nickname}):[];
                        return tags;
                    }
                },
                {field: 'status', title: '状态',width:100,operate:'select', searchList: {'normal': __('正常'),'hidden': __('隐藏')},formatter:Yunqi.formatter.switch},
                {
                    fixed: 'right',
                    field: 'operate',
                    title: '操作',
                    width:120,
                    action:{edit:true,del:true}
                }
            ]
        },
        onLoad:function (){
            this.changeType('company');
        },
        methods: {
            changeType:function (e){
                this.columns='';
                for(let key in this.extend){
                    if(key=='recyclebin_url'){
                        continue;
                    }
                    if(this.extend[key].indexOf('?')!=-1){
                        this.extend[key]=this.extend[key].slice(0,this.extend[key].indexOf('?'))+'?type='+this.activeName;
                    }else{
                        this.extend[key]=this.extend[key]+'?type='+this.activeName;
                    }
                }
                Vue.nextTick(()=>{
                    if(e=='company'){
                        this.columns=this.companyColumns;
                    }
                    if(e=='family'){
                        this.columns=this.familyColumns;
                    }
                });
            }
        }
    }
</script>
<style>

</style>